<template>
  <div class="m-order-item">
    <!-- 列表 -->
    <div class="lists">
      <div class="order-item">
        <table class="m-order-table clearfix">
          <tr>
            <th class="order-title" colspan="6">
              <div class="c-h-l fl">
                <div class="check-box">
                  <w-checkbox :label="`order${orderIndex}`" name="订单" v-model="order.checked" @on-change="_setStoreToAllCheck"></w-checkbox>
                </div>
                <span>订单编号：<span style="color: #2576FF">{{order.orderId || order.order_id}}</span></span>
                <span style="margin-left: 20px;">退款时间：{{order.addTime || '暂无'}}</span>
              </div>
              <div class="c-h-r fl">
                <span class="store-name">{{order.storeName}}</span>
              </div>
              <div class="fr" style="position: relative;">
                <w-button class="print-btn" type="option" v-if="order.orderStatus >= 30" @on-click="onPrintOrder(order.id)">打印订单</w-button>
                <div class="flag cur" v-if="order.storeSign && order.storeSign != null" @click="signStatus = true">
                  <img src="../../../assets/flag_black.png" alt="">
                </div>
              </div>
            </th>
          </tr>
        </table>
        <!-- 列表 -->
        <div class="clearfix order-list">
          <table style="width: 49%" class="fl">
            <tbody>
              <tr>
                <td class="clearfix goods-list" style="width: 22%">
                  <!-- 缺货标记：out-stock -->
                  <div class="fl goods-main-img">
                    <img v-lazy="goodsInfo.goodsMainphotoPath" alt="">
                  </div>
                  <div class="goods-info">
                    <p class="p-line-hide">{{goodsInfo.goodName}}</p>
                    <!-- SKU -->
                    <div class="goods-sku txt-goods" v-if="goodsInfo.goodsSpecContent">
                      <span>颜色：{{goodsInfo.goodsSpecContent[0]}} </span>
                      <span style="margin-left: 16px">尺码：{{goodsInfo.goodsSpecContent[1]}}</span>
                      <br>
                      <span>商品编码：{{goodsInfo.goodsSerial}}</span>
                    </div>
                  </div>
                </td>
                <!-- 单价，数量 -->
                <td style="width: 12%;" class="goods-del">
                  <span class="txt-goods number">￥{{(goodsInfo.goodsSinglePrice || 0) | currency}}</span>
                  <div class="number">
                    <span class="txt-goods goods-count">{{goodsInfo.count}}</span>
                  </div>
                  <!-- SKU,已发数量 -->
                  <!-- <div class="dev-count" v-if="order.orderStatus > 30">
                    <span>已发货：2 </span>
                    <br>
                    <span>总数量：3</span>
                  </div> -->
                </td>
              </tr>
            </tbody>
          </table>

          <!-- 状态，操作等 -->
          <table style="width: 51%;height: 114px;" class="fr">
            <tbody>
              <tr>
                <!-- 购买人 -->
                <td style="width: 14%" class="buyer txt-m">
                  <span>{{order.user_name}}</span>
                  <br>
                  <span>{{order.mobile}}</span>
                </td>
                <!-- 交易状态 -->
                <td style="width: 14%" class="options td-top">
                  <span class="c-main" v-if="goodsInfo.refundStatus == 0">退款待审核</span>
                  <span class="c-main" v-if="goodsInfo.refundStatus == 1">退款中</span>
                  <!-- <span class="c-main" v-if="goodsInfo.refundStatus == 23">农商行部分退款中</span> -->
                  <span class="c-main" v-if="goodsInfo.refundStatus == 2">退款成功</span>
                  <span class="c-main" v-if="goodsInfo.refundStatus == 3">退款拒绝</span>
                  <br>
                  <span class="det cur" @click="$router.push(`/order/reodetail/${order.id}`)">详情</span>
                  <br>
                  <div>
                    <button class="btn-option primary" v-if="goodsInfo.refundStatus == 0" @click="refundModal = true">审核</button>
                  </div>
                </td>
                <!-- 实收款 -->
                <td style="width: 14%" class="goods-amount td-top">
                  <span class="amount">¥{{goodsInfo.goodsPrice | currency}}</span>
                  <br>
                  <span style="color: #999">（含运费：¥{{ (goodsInfo.shipPrice || 0) | currency}}）</span>
                  <!-- <span>{{order.consignor | consignor}}</span> -->
                </td>
                <!-- 审核人 -->
                <td style="width: 14%;text-align: center;">
                  {{order.audit_user_name || '--'}}
                </td>
              </tr>
            </tbody>
          </table>

        </div>
      </div>

    </div>

    <!-- 查看标记弹出框 -->
    <w-panel-fixed-wrap v-model="signStatus" title="标记备注" :show-btns="showBtnsSign" :panel-title="panelTitleSign" :show-close="showCloseSign">
      <div class="sign-panel">
        <span style="vertical-align: top">标记备注：</span>
        <div class="remark">
          {{order.storeSignInfo}}
        </div>
      </div>
    </w-panel-fixed-wrap>

    <!-- 退款审核 -->
    <w-panel-fixed-wrap v-model="refundModal" title="退款审核" :width="`500px`" :confirm-text="`提交`" @on-confirm="onRefundReview">
      <div class="review-refund">
        <div>
          <span class="refund-title">退款金额：</span><span>{{order.refund_price | currency}}元</span>
        </div>
        <div>
          <span class="refund-title">订单编号：</span>
          <div class="refund-input">
            <w-input :disabled="true" v-model="order.order_id"></w-input>
          </div>
        </div>
        <div>
          <span class="refund-title">审核结果：</span>
          <w-radio :label="1" name="review" v-model="reviewParams.status">通过</w-radio>
          <w-radio :label="2" name="review" v-model="reviewParams.status">拒绝</w-radio>
        </div>
        <div v-if="reviewParams.status == 2">
          <span class="refund-title" style="vertical-align: top">原因：</span>
          <div class="refund-input">
            <textarea placeholder="请填写原因" v-model="reviewParams.auditFailReason"></textarea>
          </div>
        </div>
      </div>
    </w-panel-fixed-wrap>

  </div>
</template>

<script>
import { apiOrderMange } from 'js/api'
import { mapGetters } from 'vuex'

export default {
  props: {
    orderIndex: [Number, String],
    all: [Boolean], // 是否全选
    orderList: [Array],
    order: [Object, Array] // 订单中商品列表
  },
  data() {
    return {
      // 物流模式
      deliveryModal: [
        {label: '物流', value: '物流'},
        {label: '自提', value: '自提'}
      ],
      disabledDev: true, // 禁止输入
      showCloseSign: true,
      panelTitleSign: true,
      showBtnsSign: false,
      refundModal: false,
      signStatus: false, // 标记弹出框
      allChecked: this.all,
      orderInfo: {},
      deliveryParams: {
        accessToken: '',
        ofId: '',
        shipCode: '',
        transport: '',
        orderExpressName: ''
      },
      reviewParams: {
        accessToken: '',
        ofId: '',
        status: 1,
        auditFailReason: '',
        type: 5,
        reId: ''
      }
    }
  },
  computed: {
    ...mapGetters(['token']),
    // json转义，订单中商品信息
    goodsInfo() {
      return JSON.parse(this.order.goodInfo || '{}')
    }
  },
  methods: {
    /**
     * 打印订单
     */
    onPrintOrder(orderId) {
      window.open(`../order/print/${orderId}`)
    },
    /**
     * 退款审核
     */
    onRefundReview() {
      this.reviewParams.ofId = this.order.order_form_id
      this.reviewParams.accessToken = this.token
      this.reviewParams.reId = this.order.id
      this.reviewParams.type = 5
      if (this.reviewParams.status == 2 && this.reviewParams.auditFailReason == '') {
        this.$toast('请填写审核拒绝原因')
        return
      }
      if (this.reviewParams.status == 1) {
        this.reviewParams.auditFailReason = null
      }
      apiOrderMange.apiDeliveryGoodsFar(this.reviewParams).then(data => {
        const tip = this.reviewParams.status == 2 ? '已拒绝退款' : '退款中'
        this.$toast(tip, () => {
          this.refundModal = false
          this.$emit('on-refresh') // 通知父组件，重新调取接口
        })
      })
    },
    // 判断选中商户的个数，是否和展示的长度相同，true相同，则选中全部，false全部取消
    _setStoreToAllCheck() {
      const orderList = this.orderList
      let aStore = orderList.filter(item => {
        return item.checked === true
      })
      if (aStore.length === orderList.length) {
        this.allChecked = true
      } else {
        this.allChecked = false
      }
      this.$emit('on-checked', this.allChecked)
    }
  }
}
</script>

<style lang="scss">
.m-confirm-delivery {
  .w-input .error-tip {
    left: 0
  }
}
.m-order-item {
  .review-refund {
    .refund-input {
      .w-input {
        width: 100%;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
@import '../../../scss/_var.scss';
.btn-option {
  font-size: 12px;
  padding: 0 10px;
  border-radius: 4px;
  width: auto !important;
  height:26px;
  color: #ffffff;
  &.primary {
    background-color: rgba(74,144,226,1);
  }
  &.main {
    background-color:$color-main;
  }
}
.txt-goods {
  color: $color-line-gray;
}
.txt-m {
  color: #313131
}
.bor-b {
  border-bottom: 1px solid #DBDBDB;
}
// 顶格书写
.td-top {
  vertical-align: text-top;
  padding-top: 20px;
} 
.m-order-item {
  width: 100%;
  font-size: 12px;
  background-color: #ffffff;
}
.order-item {
  margin-bottom: 10px;
}
.m-order-table {
  width: 100%;
}

.order-list {
  border: 1px solid #DBDBDB;
  border-top: none;
  table {
    tbody {
      &:last-child {
        tr {
          &:last-child {
            border-bottom: none
          }
        }
      }
    }
  }
}
.order-title {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: #F2F2F2;
  border: 1px solid #DBDBDB;
  padding: 0 20px 0 8px;
  & >div {
    display: inline-block;
  }
  .check-box {
    display: inline-block;
    margin-right: 10px;
    line-height: 22px;
  }
  .c-h-r {
    margin-left: 40px;
    position: relative;
  }
  .store-name {
    font-weight: bold
  }
  .flag {
    width: 14px;
    height: 14px;
    display: inline-block;
    margin-left: 20px;
  }
  .print-btn {
    position: absolute;
    right: 30px;
    top: 5px;
  }
}
.goods-main-img {
  width: 88px;
  height: 88px;
  margin-right: 14px;
  position: relative;
}
.goods-list { 
  padding: 12px 10px;
}
.goods-info {
  height: 90px;
  position: relative;
  .goods-sku {
    display: inline-block;
    vertical-align: bottom;
    position: absolute;
    color: #999999;
    bottom: 0;
    & > span {
      line-height: 20px;
    }
  }
}
.goods-del {
  padding: 0 5px;
  text-align: center;
  border-left: 1px solid #DBDBDB;
  border-right: 1px solid #DBDBDB;
  .number {
    width: 42%;
    display: inline-block;
  }
  .dev-count {
    text-align: center;
    color: #606060;
    margin-top: 10px;
  }
  .goods-count {
    border: 1px solid #DBDBDB;
    padding: 5px 10px;
    margin: 0 20px 0 16px;
  }
}
.cus-ser {
  padding: 0 5px;
  text-align: center;
  border-right: 1px solid #DBDBDB;
}
.buyer {
  padding: 0 5px;
  text-align: center;
  color: #313131;
  border-right: 1px solid #DBDBDB;
}
.options {
  text-align: center;
  border-right: 1px solid #DBDBDB;
  .det {
    color: #2D8EFE;
    text-decoration: underline;
  }
  & >span {
    line-height: 24px;
  }
}
.goods-amount {
  text-align: center;
  padding: 5px;
  border-right: 1px solid #DBDBDB;
  & >span {
    line-height: 24px;
  }
  .amount {
    font-weight: bold;
  }
}
.sale-evaluate {
  padding: 5px;
}
.review-refund {
  margin-left: 30px;
  & > div {
    margin-bottom: 10px;
  }
  .refund-title {
    width: 80px;
    text-align: right;
    display: inline-block;
    // vertical-align: top;
  }
  .refund-input {
    display: inline-block;
    width: 280px;
    textarea {
      background-color: transparent
    }
  }
}
// 订单列表
.m-order-lists {
  margin-top: 20px;
}
.pages {
  margin: 30px 0;
}
// 发货弹框
.m-confirm-delivery {
  text-align: center;
  .delivery {
    margin-bottom: 20px;
  }
  .title {
    width: 80px;
    display: inline-block;
    text-align: right;
  }
  .info {
    width: 300px;
    margin-left: 10px;
    display: inline-block;
  }
}
</style>
